<template>
  <div class="content-panel">
    <div class="content-panel-header">
      <h3>内容管理</h3>
      <button class="add-btn" @click="openAdd">新增内容</button>
    </div>
    <table class="content-table">
      <thead>
        <tr>
          <th>标题</th>
          <th>状态</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in contents" :key="item.id">
          <td>{{ item.title }}</td>
          <td>{{ item.status }}</td>
          <td>{{ item.createdAt }}</td>
          <td>
            <button class="edit-btn" @click="openEdit(item)">编辑</button>
            <button class="delete-btn" @click="remove(item.id)">删除</button>
          </td>
        </tr>
        <tr v-if="!contents.length">
          <td colspan="4" style="text-align:center;color:#aaa;">暂无内容</td>
        </tr>
      </tbody>
    </table>

    <!-- 弹窗表单 -->
    <div v-if="showDialog" class="dialog-mask">
      <div class="dialog-box">
        <h4>{{ editId ? '编辑内容' : '新增内容' }}</h4>
        <form @submit.prevent="save">
          <div class="form-row">
            <label>标题：</label>
            <input v-model="form.title" required />
          </div>
          <div class="form-row">
            <label>状态：</label>
            <select v-model="form.status">
              <option value="草稿">草稿</option>
              <option value="已发布">已发布</option>
            </select>
          </div>
          <div class="dialog-actions">
            <button type="submit" class="save-btn">保存</button>
            <button type="button" class="cancel-btn" @click="closeDialog">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const contents = ref([
  { id: 1, title: '欢迎使用内容管理', status: '已发布', createdAt: '2025-07-01' },
  { id: 2, title: '示例内容2', status: '草稿', createdAt: '2025-07-02' },
]);

const showDialog = ref(false);
const editId = ref(null);
const form = ref({ title: '', status: '草稿' });

function openAdd() {
  editId.value = null;
  form.value = { title: '', status: '草稿' };
  showDialog.value = true;
}
function openEdit(item) {
  editId.value = item.id;
  form.value = { title: item.title, status: item.status };
  showDialog.value = true;
}
function closeDialog() {
  showDialog.value = false;
}
function save() {
  if (editId.value) {
    // 编辑
    const idx = contents.value.findIndex(i => i.id === editId.value);
    if (idx > -1) {
      contents.value[idx].title = form.value.title;
      contents.value[idx].status = form.value.status;
    }
  } else {
    // 新增
    contents.value.push({
      id: Date.now(),
      title: form.value.title,
      status: form.value.status,
      createdAt: new Date().toISOString().slice(0, 10)
    });
  }
  showDialog.value = false;
}
function remove(id) {
  contents.value = contents.value.filter(i => i.id !== id);
}
</script>

<style scoped>
.content-panel {
  width: 100%;
}
.content-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.add-btn {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s;
}
.add-btn:hover {
  background: #1256a3;
}
.content-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.content-table th, .content-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}
.content-table th {
  background: #f4f6fa;
  color: #555;
}
.edit-btn, .delete-btn {
  background: none;
  border: none;
  color: #1976d2;
  cursor: pointer;
  margin-right: 8px;
  font-size: 14px;
}
.delete-btn {
  color: #f44336;
}
.edit-btn:hover {
  text-decoration: underline;
}
.delete-btn:hover {
  text-decoration: underline;
}
.dialog-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.dialog-box {
  background: #fff;
  border-radius: 8px;
  padding: 28px 32px 18px 32px;
  min-width: 320px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
.form-row {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.form-row label {
  width: 60px;
  color: #555;
}
.form-row input, .form-row select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.save-btn {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
}
.cancel-btn {
  background: #eee;
  color: #333;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
}
.save-btn:hover {
  background: #1256a3;
}
.cancel-btn:hover {
  background: #ccc;
}
</style>
